<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

    <div th:if="!${#lists.isEmpty(userMemberList)}" class="container">
            <div class="cm-wbg__bx">
                <article class="mt20 mr20 mb20 ml20">
                    <div class="clearfix">
                        <aside class="pull-left mt5">
                            <span class="c-warning fs12">
                                <i class="fa fa-warning"></i>
                                所有会员权限是一致的，开通不同天数会员后可享受会员权限有效期不一样
                            </span>
                        </aside>
                    </div>
                    <div class="mt20 pt10 mb20 pb10">
                        <div class="row buyMember__wrap">
                            <section th:each="member,index:${userMemberList}" class="col-sm-4 mt10">
                                    <section class="blank-item " th:classappend="${index.index}==0 ? 'active':''" th:attr="data-id=${member['id']}">
                                        <textarea style="display: none;" th:text="${member['depict']}"></textarea>
                                        <div class="text-left ml20 mr20 pt10 pb10">
                                            <section class="mt20 text-center">
                                                <span class="fs24 c-333" th:text="${member['memberName']}"></span>
                                            </section>
                                            <section class="mt20 pt10 text-center">
                                                <span class="vam fs20 c-danger" th:text="${member['price']}">
                                                </span>
                                                <span class="vam fs12 c-999">元</span>
                                            </section>
                                            <section class="mt20 mb20 text-center">
                                                <span class="vam fs12 c-999">开通后</span>
                                                <span class="vam fs12 c-danger" th:text="${member['validDay']}"></span>
                                                <span class="vam fs12 c-999">天内享受会员权限</span>
                                            </section>
                                        </div>
                                    </section>
                                </section>
                        </div>
                    </div>
                    <div class="mt20 mb20 pt10 pb10">
                        <div class="clearfix pt10">
                            <aside class="pull-left">
                                <span class="fs20 c-warning"><i class="fa fa-cube"></i></span>
                                <span class="ml10 fs20 c-333">会员权益说明</span>
                            </aside>
                        </div>
                        <div class="ml20 pl10 mt20">
                            <span class="c-666" id="depice-text" th:text="${userMemberList['0']['depict']}"></span>
                        </div>
                        <section class="pt10 text-right">
                            <button class="btn btn-w-m btn-lg btn-danger unRadius" style="width: 180px" id="open-member" type="button">立即开通</button>
                        </section>
                    </div>
                </article>
            </div>
        </div>
    <section th:if="${#lists.isEmpty(userMemberList)}" class="no-data__wrap">
        <span class="no-data-ico"></span>
        <p class="mt20"><span class="c-666">平台暂时没有设置任何的可以开通的会员商品~~~</span></p>
    </section>

